<template>
  <div>
    <div class="box" >
      <div class="boxs"  :style="{background:activeColor}">
        <van-sticky>
         <van-nav-bar v-if="show" title="返回书架" left-arrow @click-left="onClickLeft" class="Sign"></van-nav-bar>
        </van-sticky>
        <div  ref="mains" class="zhangjie" @click="up" :style="{color:activezColor, fontSize: fontSize + 'px',marginTop:'-'+heights+'px'}" >{{main}}</div>
        <p class="ss" @click="up" :style="{fontSize: fontSize + 'px'}"></p>
        <div class="sidebar" v-if="showsid">
          <div>
            <span class='catalog'>
              目录
            </span>
            <span class="cat">
             {{zhangjie}}章
            </span>
            <ul>
              <li v-for='(item, id) in zhangjies' :key='id' @click="chapter(id)">{{item}}</li>
            </ul>
          </div>
        </div>
        <div class="bottom" v-if='show' :style="{height:gh+'rem'}">
          <span @click="lists">目录</span>
          <span @click="catalog">背景</span>
          <span @click="size">字体</span>
          <span @click="gun">滚动</span>
        </div>
        <div class="bottoms" v-if='shows' :style="{height:ghs+'rem'}">
          <ul class="colors" v-if='showb'>
            <li v-for="(item,name) in colors" :key="name" :item="item" :style="{background:item.color}" @click="changecolor(name)"></li>
          </ul>
        </div>
        <div class="bottoms" v-if='showd' :style="{height:ghs+'rem'}">
          <ul class="colors" v-if='showz'>
            <li v-for="(item,name) in colorz" :key="name" :item="item" :style="{background:item.color}" @click="changecolors(name)"></li>
          </ul>
         <p class="sizes">
          <span @click="add">
            +
          </span>
          <input type="text" v-model="text" class="size"  @blur='blur'>
          <span @click="sup">
            -
          </span>
         </p>
        </div>
        <div class="bottoms" v-if="gundo" :style="{height:ghs+'rem'}">
           
          <p class="sizess">
                速度
          <span @click="adds">
            加速+
          </span>
          <input type="text" v-model="texts" class="size"  @blur='blurs'>
          <span @click="sups">
            减速-
          </span>
         </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: "",
      activezColor:'',
      fontSize: "18",
      main: "",
      show: false,
      shows:false,
      showz:false,
      showb:false,
      showsid:false,
      showd:false,
      gundo:false,
      sum: 1,
      gh:1,
      su:1,
      ghs:1,
      suu:1,
      guns:1,
      sue:1,
      speed:"3",
      start:'',
      text:'',
      texts:'',
      distance:'0',
      height:'',
      heights:'1',
      colors:[
        {id:'1',color:'#FFF'},
        {id:'2',color:'#000'},
        {id:'3',color:"#FFFF00"},
        {id:'4',color:"#00FF00"},
        {id:'5',color:'#00FFFF'},
        {id:'6',color:"#808000"},
        {id:'7',color:"#FF00FF"},
        {id:'8',color:"#FFe4b5"},
        {id:'9',color:"#FF0000"},
      ],
      colorz:[
        {id:'1',color:'#FFF'},
        {id:'2',color:'#000'},
        {id:'3',color:"#FFFF00"},
        {id:'4',color:"#00FF00"},
        {id:'6',color:"#00FFFF"}  
      ],
      main:[],
      mains:[],
      zhangjie:'',
      zhangjies:[]
      // pattern: /\w{5,17}$/,
    };
  },
  methods: {
    
    up() {
      this.sum += 1;
      this.heights = 0;
      if (this.sum % 2 == 0) {
        this.show = true;
        this.gh = 1.8;
        this.showsid = false;
        this.gundo = false;
      } else {
        this.shows = false;
        this.show = false;
        this.gh = 0;
        this.ss = false;
        this.showsid = false;
        this.showd = false;
         this.gundo = false;
      }
    },
    lists(){
      this.sue +=1;
       
      if (this.sue % 2 == 0) {
        this.showsid = true;
        this.show=false
      } else {
        this.showsid = true;
        this.show=false
      }
      console.log(this.sue)
      
    },
    catalog(){
       this.suu =0;
       this.su +=1;
      if (this.su % 2 == 0) {
        this.shows = true;
        this.ghs = 2;
        this.showd= false;
        this.showsid = false;
        this.gundo = false;
        this.showb = true
      } else {
        this.shows = false;
        this.ghs = 0;
        this.showb = true;
        this.showd= false;
        this.showsid = false;
        this.gundo = false;
      }
    },
    size(){
      this.suu +=1;
      this.su = 0;
      console.log( this.suu)
        if (this.suu% 2 == 0) {
        this.showd = true;
        this.ghs = 2;
        this.shows= false;
        this.text=this.fontSize
        this.showsid = false;
        this.gundo = false;
        this.showz=true;
      } else {
        this.showd = false;
        this.ghs = 0;
        this.showz = true;
        this.shows= false;
        this.text=this.fontSize
        this.showsid = false;
        this.gundo = false;
      }
    },
    gun(){
      // var height= this.$refs.mains.offsetHeight;
      // this.heights = height-640;
      this.guns +=1;
      // this.speed=30;
      console.log(this.texts)
      console.log(this.guns)
      if (this.guns % 2 == 0) {
        this.gundo = true;
        this.ghs = 2;
        this.showd= false;
        this.showsid = false;
        this.shows=false;
        this.texts = this.speed;
        console.log(this.speed)
      } else {
        this.gundo = false;
        this.ghs = 0;
        this.showb = true;
        this.showd= false;
        this.showsid = false;
        this.shows=false;
        this.texts = this.speed;
        console.log(this.speed)
      }
    },
    changecolor(name){
      console.log(name)
      this.activeColor=this.colors[name].color
    },
    changecolors(name){
       this.activezColor=this.colors[name].color
    },
    chapter(id){
      console.log(id)
      this.main = this.mains[id].main;
    },
    add(){
      this.text=Number(this.text)+1
      this.fontSize=this.text
    },
    sup(){
      this.text -= 1
      this.fontSize=this.text
    },
    blur(){
      this.fontSize= this.text
    },
    sups(){
      this.start='paused'
      this.texts= Number(this.texts)+1
      this.speed = this.texts
      this.height= this.$refs.mains.offsetHeight-640;
      console.log(this.height)
        var timer = setInterval(()=>{
          this.heights += 40 
          if(this.heights>this.height-40){
             clearInterval(timer)
          }
        },this.speed*1000)
    },
    adds(){
      this.texts = this.speed-1 
      this.speed = this.texts
      this.height= this.$refs.mains.offsetHeight-640;
      console.log(this.height)
      if(this.speed<=0){
        alert('想有更快的阅读体验请手动输入0.1这样的格式')
        this.speed = 3;
        this.texts=this.speed;
      }else{
        var timer = setInterval(()=>{
          this.heights += 40 
          if(this.heights>this.height-80){
             clearInterval(timer)
          }
        },this.speed*1000)
      }
        
    },
    blurs(){
      this.speed = 0
      this.speed = this.texts
      this.height= this.$refs.mains.offsetHeight-640;
      console.log(this.height)
    
        var timer = setInterval(()=>{
          this.heights += 40 
          if(this.heights>this.height-40){
             clearInterval(timer)
          }
        },this.speed*1000)
    },
    onClickLeft(){
      this.$router.push('/Bookshelf')
    }

  },
  mounted() {
    
    this.$axios.get("/api/bookes").then((data) => {
      var image = data.data;
      // console.log(image)
      // image.forEach((item) => {
      //   item.pic =  item.pic;
      // });
      // console.log(image);
      this.main = image[0].main;
      this.mains = image
      console.log(image);
      this.zhangjies = image.map(item=>item.zhangjie)
      this.zhangjie = image.length
    });
  },
};
</script>


<style scoped>
.box {
  background:rgb(77, 221, 202);

  width: 100%;
  height: 100%;
  /* padding: 0.4rem; */
  position: relative;
}
.zhangjie {
  font-size: 0.5rem;
  width: 9.2rem;
  animation-play-state:paused;
  padding-left:.4rem;
  padding-right:.4rem ;
  /* height: 0.5rem; */
  /* transition:40s linear; */
}
.boxs {
  width: 10rem;
  height: 100%;
  position: relative;
}
.bottom {
  position: fixed;
  transform:all .3s;
  bottom: .3rem;
  background-color: #777771d5;
  width: 10rem;
  margin-bottom: -0.5rem;
  margin-right: -0.5rem;
}
.bottoms {
  position: fixed;
  transform:all .3s;
  bottom: 2rem;
  background-color: #777771d5;
  width: 10rem;
  margin-bottom: -0.5rem;
  margin-right: -0.5rem;
}
.bottoms ul li{
  width: .8rem;
  height: .8rem;
  float: left;
  margin-left: 2.8%;
  border-radius: 50%;
  background-color: #fff000;
  margin-top: .5rem;
}
/* 目录 */
.sidebar{
  position: fixed;
  top: 0rem;
  transform:all .3s;
  background-color: #777771d5;
  height: 100%;
  width: 3rem;
  margin-bottom: -0.5rem;
  margin-right: -0.5rem;
}
.sidebar ul li{
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: .3rem;
  color: #fff;
  display: block;
}
.cat{
  font-size: .4rem;
  color: #fff;
}
.bottom span{
  display: inline-block;
  width: 2.5rem;
  height: 2rem;
  background-color: #777771d5;
  text-align: center;
  line-height: 1.8rem;
}
.catalog{
  color:#fff;
  font-size: .5rem;
}
/* 字体 */
.size{
  width: 1rem;
}
.sizes{
  margin-top: .65rem;
  float: right;
  margin-right: 1rem;
}
.sizess{
   margin-top: .65rem;
 display: flex;
 justify-content: space-around;
}
.Sign {
  background-color: #777771d5;
  color: #fff;
}
.Sign>>>.van-ellipsis{
  color: #fff;
}
.Sign>>>.van-icon{
   color: #fff;
}
</style>